<template>
	<view class="page">
		<vk-data-page-header title="抽奖设置  "></vk-data-page-header>
		<!-- 页面内容开始 -->
		<view class="page-body" style="max-width: 1800px;">
			<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action" :inline="true"
				:form-type="form1.props.formType" :columns='form1.props.columns' :loading.sync="form1.props.loading"
				label-width="140px" @cancel="onCancel" @success="onFormSuccess"></vk-data-form>





		</view>
		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk = uni.vk; // vk实例
	export default {
		data() {
			// 页面数据变量
			return {
				// 表单相关开始-----------------------------------------------------------
				form1: {
					// 表单请求数据，此处可以设置默认值
					data: {
						prize_instructions: '',
						prize_balance: 0,
						drawData: [

						]
					},
					// 表单属性
					props: {
						// 表单请求地址
						action: "admin/draw_data/pub/update",
						// 表单字段显示规则
						columns: [{
								key: "drawData",

								type: "array<object>",
								itemWidth: 260,
								showAdd: true,
								showClear: true,
								showSort: true,
								// 新增一行时,该行的默认值
								defaultValue: {
									switch: true,
									text1: ""
								},
								rightBtns: ['copy', 'delete'],
								// 每行每个字段对应的渲染规则
								columns: [
									//需要以这些字段组成的对象类型id: 3,type: 1,name: '笔记本电脑',image_url: require('./image/djj.jpg')
									// {
									// 	key: "switch",
									// 	title: "开关",
									// 	type: "switch",
									// 	rules: [{
									// 		required: true,
									// 		message: "该项不能为空",
									// 		trigger: ["change", "blur"]
									// 	}]

									// },

									{
										key: "id",
										title: "奖品ID",
										type: "number",
										"width": 90,
										rules: [{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											},
											{
												type: "number",
												message: "该项必须为数字",
												trigger: ["change", "blur"]
											}
										]
									}, {
										key: "",
										title: "奖品信息",
										type: "group",
										width: 300,
										columns: [{
												"key": "type",
												"title": "奖品类型",
												"type": "select",
												labelWidth: 90,
												minwidth: 90,

												"data": [{
														value: 1,
														label: "会员"
													},
													{
														value: 2,
														label: "谢谢惠顾"
													},
													{
														value: 3,
														label: "金豆"
													},
												],

											},
											{
												key: "days",
												title: "会员天数",
												labelWidth: 70,
												width: 150,
												"showRule": "type == 1",
												type: "number",

											},
											{
												key: "balance",
												title: "金豆数量",
												width: 150,
												labelWidth: 70,
												"showRule": "type == 3",
												type: "number",

											},

										],
									},


									{
										key: "probability",
										title: "中奖概率",
										type: "number",

										rules: [{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											},
											{
												type: "number",
												message: "该项必须为数字",
												trigger: ["change", "blur"]
											}
										]
									},
									{
										key: "name",
										title: "中奖名称",
										type: "text",
										isUnique: true,
										rules: [{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											},
											{
												min: 3,
												max: 5,
												message: '长度在 3 到 5 个字符',
												trigger: ["change", "blur"]
											}
										]
									},
									{
										key: "image_url",
										title: "奖品示例图",
										type: "image",
										limit: 1,
										rules: [
											//限制只能添加一次
											{
												required: true,
												message: "该项不能为空",
												trigger: ["change", "blur"]
											}
										]
									}


								]
							},
							{
								key: "prize_balance",
								title: "抽奖消耗金豆",
								oneLine: true,
								type: "number",
								// autosize: { minRows: 4, maxRows: 10 },
								// maxlength: ,
								showWordLimit: true,
								rules: [{
										required: true,
										message: "该项不能为空",
										trigger: ["change", "blur"]
									},
									{
										type: "number",
										message: "该项必须为数字",
										trigger: ["change", "blur"]
									}
								]
							}, {
								key: "prize_instructions",
								title: "抽奖说明",
								oneLine: true,
								width: 400,
								type: "textarea",
								autosize: {
									minRows: 4,
									maxRows: 10
								},
								// autosize: { minRows: 4, maxRows: 10 },
								// maxlength: ,
								showWordLimit: true,
							},
						],
						// 表单验证规则
						rules: {

						},
						// add 代表添加 update 代表修改
						formType: '',
						// 是否显示表单1 的弹窗
						show: false,
						// 表单是否在请求中
						loading: false
					}
				},
				// 表单相关结束-----------------------------------------------------------

			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			//给drawData进行重新复制
			that = this
			vk.callFunction({
				url: 'admin/draw_data/pub/getData',
				title: '请求中...',
				data: {

				},
				success: (data) => {
					that.form1.data.drawData = data.info.drawData;
					that.form1.data.prize_balance = data.info.prize_balance
					that.form1.data.prize_instructions = data.info.prize_instructions
				}
			});


		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {


		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {

			},
			onCancel() {
				console.log("关闭");
				vk.menuTabs.closeCurrent();
			},
			onFormSuccess() {
				console.log("表单提交成功");
			},

		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>

</style>